<template>
  <ElInputTag v-model="value" />
</template>
<script setup lang="ts">
  import { ElInputTag } from 'element-plus';
  import { ref, watch } from 'vue';

  const props = defineProps<{modelValue?: Record<string, any>}>()
  const emits = defineEmits(['update:modelValue'])

  let outter = false
  let inner = false
  function getInitData() {
    if(!props.modelValue) return []

    const ret = []
    for(const key in props.modelValue) {
      const value = props.modelValue[key]
      ret.push(`${key}=${value}`)
    }

    return ret
  }
  const value = ref<string[]>(getInitData())

  watch(() => value.value, () => {
    if(outter) {
      outter = false
      return
    }

    inner = true    
    const ret = {}
    for(const item of value.value) {
      const items = item.split('=')
      ret[items[0]] = items.length > 1 ? items[1] : ''
    }
    emits('update:modelValue', ret)
  }, {deep: true})

  watch(() => props.modelValue, () => {
    if(inner) {
      inner = false
      return
    }
    
    outter = true
    value.value = getInitData()
  })
</script>